<template>
  <div class="icon-selector">
    <!-- 输入框触发弹窗 -->
    <el-input
      v-model="displayText"
      :placeholder="placeholder || '请选择图标'"
      readonly
      @click="visible = true"
      style="cursor: pointer;"
    >
      <template #prefix>
        <el-icon v-if="modelValue" style="margin-right: 8px;">
          <component :is="selectedIcon?.component" />
        </el-icon>
      </template>
      <template #suffix>
        <el-icon><ArrowDown /></el-icon>
      </template>
    </el-input>

    <!-- 图标选择弹窗 -->
    <el-dialog v-model="visible" title="选择图标" width="600px">
      <el-input
        v-model="searchQuery"
        placeholder="搜索图标名称"
        clearable
        style="margin-bottom: 16px;"
      />

      <!-- 图标网格 -->
      <div class="icon-grid">
        <div
          v-for="icon in filteredIcons"
          :key="icon.iconName"
          class="icon-item"
          @click="handleSelect(icon)"
        >
          <el-icon style="font-size: 24px;"><component :is="icon.component" /></el-icon>
          <div class="icon-label">{{ icon.label }}</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, defineEmits, watch } from 'vue';
import { ArrowDown } from '@element-plus/icons-vue';
import { iconLibrary, IconItem } from './icon'; // 导入独立图标库

// 定义组件Props
const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  }
});

// 定义组件Emits
const emits = defineEmits(['update:modelValue']);

// 弹窗显隐控制
const visible = ref(false);
// 搜索关键词
const searchQuery = ref('');
// 过滤后的图标列表
const filteredIcons = computed(() => {
  const query = searchQuery.value.trim().toLowerCase();
  return query
    ? iconLibrary.filter(icon =>
      icon.label.toLowerCase().includes(query) ||
      icon.iconName.toLowerCase().includes(query)
    )
    : iconLibrary;
});

// 当前选中的图标
const selectedIcon = computed<IconItem | undefined>(() => {
  if (!props.modelValue) return undefined;
  return iconLibrary.find(icon => icon.iconName === props.modelValue);
});

// 输入框显示文本（图标名称+标签）
const displayText = computed(() => {
  if (!selectedIcon.value) return '';
  return `${selectedIcon.value.label} (${selectedIcon.value.iconName})`;
});

// 选择图标时触发
const handleSelect = (icon: IconItem) => {
  emits('update:modelValue', icon.iconName); // 向父组件传递选中的图标名称
  visible.value = false;
  searchQuery.value = '';
};

// 监听外部值变化（编辑时回显）
watch(
  () => props.modelValue,
  () => {
    // 当外部值变化时自动更新显示
  }
);
</script>

<style scoped>
.icon-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  max-height: 400px;
  overflow-y: auto;
  /*padding: 8px;*/
}

.icon-item {
  width: 80px;
  text-align: center;
  padding: 4px 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.icon-item:hover {
  background-color: #f0f2f5;
  transform: scale(1.05);
}

.icon-label {
  font-size: 12px;
  margin-top: 8px;
  color: #606266;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

